<template>
  <el-form
    label-width="80px"
    :model="ruleForm"
    ref="ruleForm"
    status-icon
    :rules="rules"
    class="demo-ruleForm"
  >
     <el-form-item  prop="id" hidden>
      <el-input v-model="ruleForm.id" v-if="false" ></el-input>
     </el-form-item>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username" ></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="ruleForm.name"  ></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="password">
      <el-input v-model="ruleForm.password" type="password"/>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="ruleForm.age"  autocomplete="off"/>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="ruleForm.phone"  autocomplete="off"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()"
        >提交</el-button
      >
      <el-button @click="resetForm()">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "长度在2到6个字符",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 4,
            message: "长度在2到4个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 12,
            message: "长度在5到12个字符",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
          {
            min: 1,
            max: 3,
            message: "长度在1到3个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$axios({
        method: "post",
        url: "http://localhost:8080/nav/nomtwo",
        data: this.$qs.stringify(this.ruleForm),
      }).then((res) => {
        console.log(res.data);
        this.persons = res.data;
        if (res.data.code == 1) {
          ElMessage("修改成功");
          this.$router.go(-1);
        } else {
          console.log("error");
        }
      });
    },
    resetForm() {
      (this.ruleForm.username = ""),
        (this.ruleForm.name = ""),
        (this.ruleForm.password = ""),
        (this.ruleForm.age = ""),
        (this.ruleForm.phone = "");
    },
  },
  mounted() {
    this.ruleForm = this.$store.state.user;
  },
};
</script>

<style scoped>
</style>